<template>
    <div class="container">
        <!-- <van-nav-bar
            title="绑定手机"
            left-text="返回"
            left-arrow
            @click-left="goBack"
        /> -->
        <div class="form">
            <van-form @submit="onSubmit">
                <van-cell-group>
                    <!-- <van-field name="isBuy" label="是否已购买产品">
            <template #input>
              <van-radio-group v-model="isBuy" direction="horizontal">
                <van-radio name="0">否</van-radio>
                <van-radio name="1">是</van-radio>
              </van-radio-group>
            </template>
          </van-field> -->
                    <van-field :rules="[{ required: true, message: '请输入姓名' }]" name="name" v-model="name" label="姓名" placeholder="请输入姓名" />
                    <van-field name="phone" :rules="[{ validator: phoneValidator, message: '请输入正确手机号' }]" v-model="phone" label="手机号" placeholder="手机号" />
                    <!-- <van-field
            v-if="isBuy == 1"
            name="idcardNo"
            v-model="idcardNo"
            label="身份证"
            placeholder="请输入"
            :rules="[
              { validator: idCardValidator, message: '请输入正确身份证号' },
            ]"
          /> -->

                    <!-- <van-field
            name="phone"
            v-model="phone"
            label="手机号"
            placeholder="手机号"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                native-type="button"
                @click="sendVerifyCode(phone)"
                :disabled="isSending"
                >{{ isSending ? `${count}s后失效` : "发送验证码" }}</van-button
              >
            </template>
          </van-field> -->
                </van-cell-group>
                <div class="btn">
                    <van-button :loading="isLoading" loading-text="提交中..." round block type="primary" native-type="submit"> 确定 </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import { Toast } from "vant";
    import { checkInfo } from "@/api/userInfo";
    import { sendVerifyCode } from "@/api/common";
    import { getDetail } from "@/api/userInfo";

    export default {
        data() {
            return {
                phone: "",
                password: "",
                name: "",
                idcardNo: "",
                isBuy: "0",
                confirmPassword: "",
                showNext: false,
                _captcha: "",
                captcha: "",
                isSending: false,
                isLoading: false,
                count: 120,
                timer: null,
            };
        },
        methods: {
            async onSubmit(values) {
                this.isLoading = true;
                let { name, idcardNo, phone, isBuy } = values;
                let res = await checkInfo({ name, idcardNo, phone, isBuy });
                if (res.code === 1) {
                    //刷新用户信息
                    await this.refreshUserInfo();
                    Toast("绑定成功！");
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 2000);
                }
                this.isLoading = false;
            },
            async sendVerifyCode(phone) {
                if (!/^1[3456789]\d{9}$/.test(phone)) {
                    Toast("手机号格式不正确！");
                    return;
                }
                this.isSending = true;
                this.startCount();
                let data = await sendVerifyCode({ phone });
                this._captcha = data;
            },
            async refreshUserInfo() {
                const userInfo = this.$getUserInfo();
                let res = await getDetail({
                    id: userInfo.id,
                });
                if (!this.$_.isEmpty(res)) {
                    this.$setUserInfo({
                        ...userInfo,
                        ...res,
                    });
                }
            },
            startCount() {
                let _this = this;
                let timer = setInterval(() => {
                    if (_this.count === 0) {
                        clearInterval(timer);
                        _this.count = 120;
                        _this.isSending = false;
                    }
                    _this.count--;
                    _this.timer = timer;
                }, 1000);
            },
            validator(val) {
                if (val !== this.password) {
                    return false;
                }
            },
            idCardValidator(val) {
                if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
                    return false;
                }
            },
            phoneValidator(val) {
                if (!/^1[3456789]\d{9}$/.test(val)) {
                    return false;
                }
            },
            pswValidator(val) {
                if (val.length < 6) {
                    return false;
                }
            },
            goBack() {
                this.$router.go(-1);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .form {
        margin-top: 20px;
    }
    .btn {
        width: 90%;
        margin: 30px auto 20px;
    }
</style>
